<template>
  <div class="progress-box" :style="{
    transform: `scale(${w}, 1)`,
    background: w === 1 ? '#67C23A': '#409EFF',
  }"></div>
</template>

<script>
import axios from 'axios';

export default {
  name: 'Progress',
  props: [ 's' ],
  data() {
    return {
      end: false,
      w: 0
    }
  },
  created() {
    this.start();
  },
  watch: {
    s(v) {
      v === 'START' && this.start();
      v === 'STOP' && this.stop();
      v === 'ERR' && this.err();
      typeof v === 'number' && ( this.w = v/100*.8 );
    }
  },
  methods: {
    start() {
      if (this.s != 'START') {
        return
      }
      // const work = () => {
      //   setTimeout(() => {
      //     let amount = 0;
      //     let n = this.w;

      //     if (this.end || n >= 1) return;

      //     if (n >= 0 && n < 0.2) { amount = 0.1; }
      //     else if (n >= 0.2 && n < 0.4) { amount = 0.04; }
      //     else if (n >= 0.4 && n < 0.7) { amount = 0.02; }
      //     else if (n >= 0.7 && n < 0.9) { amount = 0.002; }
      //     else { amount = 0; }

      //     this.w = this.clamp(n + amount, 0, 0.94);
      //     work();
      //   }, 200);
      // }

      // work();
    },

    stop() {
      this.end = true;
      this.w = 1;
    },

    err() {
      this.end = true;
      this.w = 0;
    },

    clamp(n, min, max) {
      if (n < min) return min;
      if (n > max) return max;
      return n;
    }
  }
}
</script>

<style lang="less">
@import '../style/_mixin.less';

.progress-box {
  position: absolute;
  font-size: 0;
  height: 2px;
  width: 100%;
  background: #409EFF;
  bottom: -1px;
  left: 0;
  transition: all .4s ease-in-out;
  transform: scale(0, 1);
  transform-origin: left;
}
</style>
